<template>
  <div class="dashboard">
    <div class="page-header">
      <h1>主控制台</h1>
      <p>欢迎使用供应商管理系统</p>
    </div>

    <!-- 统计卡片 -->
    <el-row :gutter="20" class="stats-row">
      <el-col :span="6">
        <el-card class="stat-card user-card">
          <div class="stat-content">
            <div class="stat-icon">
              <el-icon size="40"><User /></el-icon>
            </div>
            <div class="stat-info">
              <h3>{{ stats.userCount }}</h3>
              <p>用户总数</p>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card class="stat-card supplier-card">
          <div class="stat-content">
            <div class="stat-icon">
              <el-icon size="40"><Shop /></el-icon>
            </div>
            <div class="stat-info">
              <h3>{{ stats.supplierCount }}</h3>
              <p>供应商总数</p>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card class="stat-card active-card">
          <div class="stat-content">
            <div class="stat-icon">
              <el-icon size="40"><Check /></el-icon>
            </div>
            <div class="stat-info">
              <h3>{{ stats.activeSupplierCount }}</h3>
              <p>活跃供应商</p>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card class="stat-card log-card">
          <div class="stat-content">
            <div class="stat-icon">
              <el-icon size="40"><Document /></el-icon>
            </div>
            <div class="stat-info">
              <h3>{{ stats.todayLogCount }}</h3>
              <p>今日操作数</p>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 快捷操作 -->
    <el-row :gutter="20" class="content-row">
      <el-col :span="12">
        <el-card>
          <template #header>
            <span>快捷操作</span>
          </template>
          <div class="quick-actions">
            <el-button type="primary" @click="$router.push('/users')">
              <el-icon><User /></el-icon>
              用户管理
            </el-button>
            <el-button type="success" @click="$router.push('/suppliers')">
              <el-icon><Shop /></el-icon>
              供应商管理
            </el-button>
            <el-button type="info" @click="$router.push('/logs')">
              <el-icon><Document /></el-icon>
              查看日志
            </el-button>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="12">
        <el-card>
          <template #header>
            <span>用户信息</span>
          </template>
          <div class="user-info">
            <el-descriptions :column="1" border>
              <el-descriptions-item label="用户名">
                {{ userStore.userInfo.username }}
              </el-descriptions-item>
              <el-descriptions-item label="真实姓名">
                {{ userStore.userInfo.realName }}
              </el-descriptions-item>
              <el-descriptions-item label="邮箱">
                {{ userStore.userInfo.email || '未设置' }}
              </el-descriptions-item>
              <el-descriptions-item label="状态">
                <el-tag :type="userStore.userInfo.status === 1 ? 'success' : 'danger'">
                  {{ userStore.userInfo.statusDesc }}
                </el-tag>
              </el-descriptions-item>
            </el-descriptions>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import {onMounted, ref} from 'vue'
import {useUserStore} from '@/stores/user'
import {Check, Document, Shop, User} from '@element-plus/icons-vue'
import {getDashboardStats} from '@/api/log'

const userStore = useUserStore()

const stats = ref({
  userCount: 0,
  supplierCount: 0,
  activeSupplierCount: 0,
  todayLogCount: 0
})

// 获取统计数据（真实接口）
const fetchStats = async () => {
  try {
    const data = await getDashboardStats()
    stats.value = {
      userCount: data.userCount || 0,
      supplierCount: data.supplierCount || 0,
      activeSupplierCount: data.activeSupplierCount || 0,
      todayLogCount: data.todayLogCount || 0
    }
  } catch (e) {
    // 保持默认 0 值
  }
}

onMounted(() => {
  fetchStats()
})
</script>

<style scoped>
.dashboard {
  padding: 0;
}

.page-header {
  margin-bottom: 20px;
}

.page-header h1 {
  margin: 0 0 5px 0;
  color: #303133;
}

.page-header p {
  margin: 0;
  color: #909399;
}

.stats-row {
  margin-bottom: 20px;
}

.content-row {
  margin-bottom: 20px;
}

.stat-card {
  cursor: pointer;
  transition: all 0.3s;
}

.stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.stat-content {
  display: flex;
  align-items: center;
  padding: 10px;
}

.stat-icon {
  margin-right: 15px;
  padding: 15px;
  border-radius: 10px;
}

.user-card .stat-icon {
  background-color: #e3f2fd;
  color: #1976d2;
}

.supplier-card .stat-icon {
  background-color: #e8f5e8;
  color: #388e3c;
}

.active-card .stat-icon {
  background-color: #fff3e0;
  color: #f57c00;
}

.log-card .stat-icon {
  background-color: #fce4ec;
  color: #c2185b;
}

.stat-info h3 {
  margin: 0 0 5px 0;
  font-size: 24px;
  font-weight: bold;
  color: #303133;
}

.stat-info p {
  margin: 0;
  color: #909399;
  font-size: 14px;
}

.quick-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.quick-actions .el-button {
  flex: 1;
  min-width: 120px;
}

.user-info {
  padding: 10px 0;
}
</style>